<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">
	<ui:define name="title">
		<h:outputText value="Creación de Registrador" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			<!-- MENU PERFIL ADMINISTADOR -->
			<ui:include src="menu.xhtml" />
		</div>
	</ui:define>
	<ui:define name="content">
		<div class="page-header titulopag">
			<h3>
				<h:outputText value="Registrador" />
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Registro</li>
			</ol>
		</div>
		<div class="page-subheader  titulopag">
			Datos Personales
		</div>
	
	<h:form id="form">
		<p:messages id="messages"  autoUpdate="true" />
		<!-- Mensajes de Errores -->
		<div class="gridContent">
			<div class="inner">
				<div class="row">
					<div class="col-sm-12 form-group">
						<p:outputLabel id="lblCenso" value="Censo:" for="cboCenso" />
						<h:selectOneMenu styleClass="form-control" id="cboCenso" label="Text 3" 
							disabled="${responsableService.loginService.usuario.perfilId eq '5' or responsableService.responsableHabilitado or responsableService.deshabilitar}"
							value="#{responsableService.responsable.idCenso}" required="true" 
							requiredMessage="Censo: Campo Obligatorio." 
							validatorMessage="Censo: Campo Obligatorio." >
							<f:selectItem itemLabel="Seleccione Censo" itemValue="-1" noSelectionOption="true" />
							<f:selectItems value="#{responsableService.listaCensos}" var="entidad" itemLabel="#{entidad.nombre}" itemValue="#{entidad.id}"/>
							<p:ajax listener="#{responsableService.onCensoChange}" update="panelEntidad"/>
						</h:selectOneMenu>
					</div>
				</div>
				<div class="row no-gutter form-group">
					<p:outputLabel id="lblDNI" for="txtDNI" value="Documento de Identidad" />
					<div class="col-sm-4 input-group">
						<p:inputMask id="txtDNI" value="#{responsableService.responsable.nroDocumento}" 
							maxlength="8" required="true" onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));" 
							requiredMessage="Documento de Identidad: Campo Obligatorio." 
							validatorMessage="Documento de Identidad: Campo debe tener 8 caracteres."
							disabled="#{responsableService.editar}" autocomplete="off">
							<f:validateLength minimum="8" maximum="8"  />
							<p:ajax event="keyup" update="panelReniec" listener="#{responsableService.handleKeyEvent}" />
						</p:inputMask>
						<span class="input-group-btn">
							<c:if test="#{responsableService.mostrarBotonReniec}">
							<p:commandButton id="btnReniec" styleClass="btn btn-default" 
								process="@this" 
								update="panelReniec" 
								value="Reniec"  actionListener="#{responsableService.obtenerDatosReniec}" >
								<p:resetInput target="panelReniec" />
								</p:commandButton>
							</c:if>
						</span>
					</div>
					<!-- /input-group -->
				</div>
				<p:panel id="panelReniec">
				<div class="row">
                       <div class="col-sm-4 form-group">
                               <p:outputLabel value="Apellido Paterno" for="txtApePat" />
                               <p:inputText id="txtApePat"  disabled="true" required="true"
                                       value="#{responsableService.responsable.apellidoPaterno}" />
                       </div>
                       <div class="col-sm-4 form-group">
                               <p:outputLabel value="Apellido Materno" for="txtApeMat"/>
                               <p:inputText id="txtApeMat"  disabled="true" value="#{responsableService.responsable.apellidoMaterno}" />
                       </div>
                       <div class="col-sm-4 form-group">
                               <p:outputLabel value="Nombre (s)" for="txtNombres"/>
                               <p:inputText id="txtNombres"  disabled="true" required="true" value="#{responsableService.responsable.nombreCompleto}"/>
                       </div>
                      </div>
                <div class="row">
					<div class="col-sm-4 form-group" style="width:130px;">
				        <p:outputLabel id="lblFecNac" value="Nacimiento" for="txtFecNac" />
				        <p:calendar id="txtFecNac" value="#{responsableService.responsable.fechaNacimiento}" pattern="dd/MM/yyyy" disabled="true" />
					</div>
					<div class="col-sm-4 form-group" style="width:190px;">
				        <p:outputLabel value="Género" for="cboGenero" />
				        <h:selectOneMenu styleClass="form-control" id="cboGenero" value="#{responsableService.responsable.sexo}"
				        disabled="true">
				                <f:selectItem itemLabel="Seleccionar" itemValue="" noSelectionOption="true" />
				                <f:selectItem itemLabel="Masculino" itemValue="1" />
				                <f:selectItem itemLabel="Femenino" itemValue="2" />
				        </h:selectOneMenu>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12 form-group">
						<p:outputLabel for="txtDir" value="Dirección de Residencia" />
						<p:inputText id="txtDir" value="#{responsableService.responsable.direccion}"
						disabled="${responsableService.deshabilitar}" required="true" maxlength="200" 
						requiredMessage="Dirección de Residencia: Campo Obligatorio."/>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-4 form-group">
						<p:outputLabel for="departamento" value="Departamento" />
						<h:selectOneMenu id="departamento" value="#{responsableService.responsable.ubigeoDepartamento}"
						disabled="${responsableService.deshabilitar}"
						styleClass="form-control" required="true" 
						requiredMessage="El campo 'Departamento' es Obligatorio.">
							<f:selectItem itemLabel="Seleccionar" itemValue="00" noSelectionOption="true" />
							<p:ajax listener="#{responsableService.onDepartamentoChange}" update="cboProv,cboDis" />
			                <f:selectItems value="#{responsableService.listaDepartamentos}" var="departamento" itemLabel="#{departamento.descripcion}" itemValue="#{departamento.codigo}" />
						</h:selectOneMenu>
					</div>
					<div class="col-sm-4 form-group">
						<p:outputLabel for="cboProv" value="Provincia" />
						<h:selectOneMenu id="cboProv"  required="true"  value="#{responsableService.responsable.ubigeoProvincia}"
						disabled="${responsableService.deshabilitar}"
						styleClass="form-control" requiredMessage="El campo 'Provincia' es Obligatorio.">								
							<p:ajax listener="#{responsableService.onProvinciaChange}" update="cboDis" />
							<f:selectItem itemLabel="Seleccionar" itemValue="00" noSelectionOption="true" />
			                <f:selectItems value="#{responsableService.listaProvincias}" var="provincia" itemLabel="#{provincia.descripcion}" itemValue="#{provincia.codigo}" />
						</h:selectOneMenu>
					</div>
					<div class="col-sm-4 form-group">
						<p:outputLabel for="cboDis" value="Distrito" />
						<h:selectOneMenu id="cboDis" value="#{responsableService.responsable.ubigeoDistrito}"
						disabled="${responsableService.deshabilitar}"
						styleClass="form-control" required="true" 
						requiredMessage="El campo 'Distrito' es Obligatorio.">
							<f:selectItem itemLabel="Seleccionar" itemValue="00" noSelectionOption="true" />
			                <f:selectItems value="#{responsableService.listaDistritos}" var="distrito" itemLabel="#{distrito.descripcion}" itemValue="#{distrito.codigo}" />
						</h:selectOneMenu>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-4 form-group">
						<p:outputLabel value="Teléfono Celular" for="txtTelCel" />
						<p:inputText id="txtTelCel" value="#{responsableService.responsable.celular}"  
						disabled="${responsableService.deshabilitar}"
						required="true"
						requiredMessage="Teléfono Celular: Campo Obligatorio."
						validatorMessage="Teléfono Celular: Ingrese un número de celular válido."
						onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
						maxlength="9">
							<f:validateLength minimum="9" maximum="9"  />
						</p:inputText>
					</div>
					<div class="col-sm-4 form-group">
						<p:outputLabel value="Correo Personal" for="txtCorPer" />
						<p:inputText id="txtCorPer" value="#{responsableService.responsable.emailPersonal}"
						disabled="${responsableService.deshabilitar}"
						required="true" 
						requiredMessage="Correo Personal: Campo Obligatorio." 
						validatorMessage="Correo Personal: Campo no tiene un formato válido." 
						autocomplete="off" maxlength="250" 
						styleClass="text-transform-none">
							<p:ajax event="keyup" listener="#{responsableService.verificaEmail}" update="messages"  />
							</p:inputText>
					</div>
					<div class="col-sm-4 form-group">
						<p:outputLabel value="Teléfono Fijo" for="txtTelFijo" />
						<p:inputText id="txtTelFijo" value="#{responsableService.responsable.telefono}" 
						disabled="${responsableService.deshabilitar}"
						validatorMessage="Teléfono Fijo: Ingrese un teléfono válido."
						onkeyup="$(this).val($(this).val().replace(/[^0-9]/g, ''));"
						maxlength="7">
							<f:validateLength minimum="0" maximum="7"  />
						</p:inputText>
					</div>
				</div>
				</p:panel>
			</div>
		</div>

		<div class="page-subheader  titulopag">
			Datos Laborales
		</div>
		<div class="gridContent">
			<div class="inner">
			<p:panel id="panelEntidad">
				<div class="row">
					<div class="col-sm-12 form-group">
						<p:outputLabel for="cboEnt" value="Entidad" />
						<h:selectOneMenu id="cboEnt" value="#{responsableService.responsable.entidadId}"
						disabled="${responsableService.loginService.usuario.perfilId eq '5' or responsableService.responsableHabilitado or responsableService.deshabilitar}"
						required="true" 
						requiredMessage="El campo 'Entidad' es Obligatorio."
						styleClass="form-control">
							<f:selectItem itemLabel="Seleccionar" itemValue="-1" noSelectionOption="true" />
							<f:selectItems value="#{responsableService.listaEntidades}" var="entidad" itemLabel="#{entidad.nombre}" itemValue="#{entidad.id}" />
						</h:selectOneMenu>
					</div>
				</div>
			</p:panel>
				<div class="row">
					<div class="col-sm-6 form-group">
						<p:outputLabel for="txtCargo" value="Cargo" />
						<p:inputText id="txtCargo" value="#{responsableService.responsable.cargo}"
						disabled="${responsableService.deshabilitar}"
						required="true" 
						requiredMessage="Cargo: Campo Obligatorio."/>
					</div>
					<div class="col-sm-6 form-group">
						<p:outputLabel for="cboEstadoResponsable" value="Estado Responsable" />
						<h:selectOneMenu id="cboEstadoResponsable" value="#{responsableService.responsable.idEstadoResponsable}"
						disabled="true"
						styleClass="form-control">
							<f:selectItems value="#{responsableService.listaEstadoResponsable}" var="entidad" itemLabel="#{entidad.nombre}" itemValue="#{entidad.id}" />
						</h:selectOneMenu>
					</div>
				</div>
				
				<div class="row">
					<div class="col-sm-6 form-group">
						<p:outputLabel for="txtFechaFinHab" value="Fecha Fin de Registro" rendered="${responsableService.editar}"/>
						<p:calendar id="txtFechaFinHab" value="#{responsableService.responsable.fechaFinHabilitacion}"
						pattern="dd/MM/yyyy" 
						rendered="${responsableService.editar}"
						disabled="true"/>
					</div>
					<div class="col-sm-6 form-group">
						<p:outputLabel for="txtFechaFinHabExt" value="Fecha Fin de Registro Ampliada" rendered="${responsableService.editar}"/>
						<p:calendar id="txtFechaFinHabExt" value="#{responsableService.responsable.fechaFinCensoExt}"
						pattern="dd/MM/yyyy" 
						rendered="${responsableService.editar}"
						disabled="true"/>
					</div>
				</div>
				
				<div class="btnAction row no-gutter">
					<div class="text-right">
						<c:if test="#{(responsableService.responsable.idEstadoResponsable == 1 or responsableService.responsable.idEstadoResponsable == 2) and responsableService.editar and responsableService.censo.estadoCensoId == 2}">
						<p:commandButton id="habilitaResponsable" styleClass="btn btn-success" 
						update="messages form" value="Habilitar Responsable" icon="fa fa-envelope-o" iconPos="right" 
						disabled="${responsableService.deshabilitar}"
						actionListener="#{responsableService.informarResponsable}" oncomplete="setTimeout('mensajeFadeOut()', 5000);">
							<p:confirm header="Confirmación" message="¿Está seguro de habilitar el Responsable?" icon="ui-icon-alert" />
						</p:commandButton>
						&nbsp;&nbsp;
						</c:if>
						<p:commandLink immediate="true" styleClass="btn btn-view" style="padding: 10px;" value="Cancelar"
									action="responsables_listado.jsf">
									<p:confirm header="Confirmación" message="¿Está seguro de cancelar el registro de Responsable?" icon="ui-icon-alert" />			
						</p:commandLink>
							&nbsp;&nbsp;
						<p:commandButton id="grabaResponsable" styleClass="btn btn-success" update="messages form" value="Guardar" 
						disabled="${responsableService.deshabilitar}"
						icon="fa fa-floppy-o" iconPos="right" 
						actionListener="#{responsableService.guardarResponsable}" 
						oncomplete="setTimeout('mensajeFadeOut()', 5000);">
							<p:confirm header="Confirmación" message="¿Está seguro de guardar el registro de Responsable?" icon="ui-icon-alert" />
						</p:commandButton>
					</div>
				</div>
			</div>
		</div>
		
		</h:form>
		<p:confirmDialog  global="true" showEffect="fade" hideEffect="explode" closeOnEscape="true" rendered="true">
	        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
	        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
	    </p:confirmDialog>
	</ui:define>
</ui:composition>